fix(editor): align text indentation across bullet, ordered, and task lists#61
fix(editor): align text indentation across bullet, ordered, and task lists#61sfarestam wants to merge 1 commit intodebuglebowski:mainfrom
Conversation
…lists Unify text start position for all list types at 2.25em padding: - Bullet lists: native markers in the padding area - Ordered lists: CSS counter with absolute positioning and nowrap - Task lists: checkbox absolutely positioned in the padding area All three list types now have their text content starting at the same horizontal position, with markers/numbers/checkboxes aligned in the padding gutter. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| .ProseMirror li[data-item-type="task"] > input[type="checkbox"] { | ||
| flex-shrink: 0; | ||
| position: absolute; | ||
| left: -1.75em; | ||
| top: 0.25em; | ||
| cursor: pointer; | ||
| margin-top: 0.3em; | ||
| accent-color: var(--color-primary); | ||
| } |
There was a problem hiding this comment.
The ordered-list ::before counter sits at left: -2em with width: 1.75em, placing its right edge at −0.25em from the text content. The task-list checkbox is anchored at left: -1.75em, so its right edge lands at roughly −0.75em depending on the browser's native checkbox width (~1em). If pixel-perfect alignment of all three gutter markers matters, the checkbox offset may need a small tweak (e.g. left: -2em) to align its right edge with the counter's.
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/apps/app/src/renderer/src/assets/main.css
Line: 355-361
Comment:
**Checkbox right-edge may not align with counter right-edge**
The ordered-list `::before` counter sits at `left: -2em` with `width: 1.75em`, placing its right edge at `−0.25em` from the text content. The task-list checkbox is anchored at `left: -1.75em`, so its right edge lands at roughly `−0.75em` depending on the browser's native checkbox width (~1em). If pixel-perfect alignment of all three gutter markers matters, the checkbox offset may need a small tweak (e.g. `left: -2em`) to align its right edge with the counter's.
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| .milkdown-editor.prose ul { | ||
| padding-left: 2.25em !important; | ||
| padding-inline-start: 2.25em !important; | ||
| } | ||
|
|
||
| .milkdown-editor.prose ol { | ||
| list-style: none !important; | ||
| counter-reset: ol-counter !important; | ||
| padding-left: 2.25em !important; | ||
| padding-inline-start: 2.25em !important; | ||
| } | ||
|
|
||
| .milkdown-editor.prose ol > li { | ||
| counter-increment: ol-counter !important; | ||
| position: relative !important; | ||
| } | ||
|
|
||
| .milkdown-editor.prose ol > li::before { | ||
| content: counter(ol-counter) "." !important; | ||
| position: absolute !important; | ||
| left: -2em !important; | ||
| width: 1.75em !important; | ||
| text-align: right !important; | ||
| white-space: nowrap !important; | ||
| font-variant-numeric: tabular-nums !important; | ||
| } |
There was a problem hiding this comment.
!important makes future overrides brittle
Every property in the new .milkdown-editor.prose ul/ol block is flagged !important. If a parent component or a theme variant ever needs to adjust indentation or counter behaviour (e.g. a compact/read-only view), it must fight these with its own !important or higher specificity. Consider applying !important only to the specific properties where Milkdown's own stylesheet is confirmed to win — rather than adding it blanket-wide.
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/apps/app/src/renderer/src/assets/main.css
Line: 255-280
Comment:
**Blanket `!important` makes future overrides brittle**
Every property in the new `.milkdown-editor.prose ul/ol` block is flagged `!important`. If a parent component or a theme variant ever needs to adjust indentation or counter behaviour (e.g. a compact/read-only view), it must fight these with its own `!important` or higher specificity. Consider applying `!important` only to the specific properties where Milkdown's own stylesheet is confirmed to win — rather than adding it blanket-wide.
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
2 participants
Summary
2.25empadding::beforepseudo-element) that is absolutely positioned and right-aligned in the padding gutter, withwhite-space: nowrapto handle double-digit numbersTest plan
🤖 Generated with Claude Code
Greptile Summary
This PR unifies the left-gutter indentation for bullet, ordered, and task lists in the Milkdown prose editor to
2.25em, replacing the previous mixed approach (flexbox for task lists, native numbering for ordered lists) with absolute-positioned markers so all three list types share the same text start position.Confidence Score: 5/5
Safe to merge — CSS-only change with no logic errors; all remaining findings are P2 style suggestions.
Both findings are P2 style concerns (minor visual gutter alignment and blanket !important usage). No P0 or P1 defects are present. The CSS counter approach for nested lists is correct — each nested ol resets its own scoped counter.
No files require special attention.
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[List element rendered] --> B{List type?} B -->|ul bullet| C[".milkdown-editor.prose ul\npadding-left: 2.25em\nNative disc marker in gutter"] B -->|ol ordered| D[".milkdown-editor.prose ol\nlist-style: none\ncounter-reset: ol-counter"] D --> E["ol > li\ncounter-increment: ol-counter\nposition: relative"] E --> F["li::before pseudo-element\ncontent: counter '.'\nabs pos left:-2em width:1.75em\ntext-align:right"] B -->|task list| G[".ProseMirror ul:has task li\npadding-left: 2.25em"] G --> H["li data-item-type=task\nposition: relative\nlist-style: none"] H --> I["input checkbox\nabs pos left:-1.75em top:0.25em"] C --> J[Text starts at 2.25em from ul left edge] F --> J I --> JPrompt To Fix All With AI
Reviews (1): Last reviewed commit: "fix(editor): align text indentation acro..." | Re-trigger Greptile